$(function () {
    // 筛选按钮初始化
    mui(".productBtn").on('tap', '.mui-btn', function (e) {
        mui(this).button('loading');
        setTimeout(function () {
            mui(this).button('reset');
        }.bind(this), 2000);
    });
    // console.log(FastClick)
    FastClick.attach(document.body);
    // 定义一个当前页
    let page = 1;
    // 定义一个最大页码
    let pageNum = '';
    init();
    function init() {
        getCategoryByid();
        getProductList(page);
        eventList();
    };
    // 首先分类的数据，设置到面包屑的数据
    function getCategoryByid() {
        // console.log(123)
        // 调用方法获取url里面的参数,准备参数发送请求
        $.get("http://193.112.55.79:9090/api/getcategorybyid", {
            categoryid: getUrl("categoryid")
        }, function (result) {
            // console.log(result)
            // 获取要渲染的数据
            let catData = result.result[0].category;
            // console.log(catData)
            // 准备一个字符串
            let html = `
            <li><a href="index.html">首页</a></li>
                <li><a href="category.html">全部分类</a></li>
                <li><a href="javascript:;">${catData}</a></li>
            `;
            // 添加到页面上
            $(".top_bread_list").html(html);
        })

    };

    // 获取分类列表的数据
    function getProductList(page) {
        // 准备数据 发送请求
        $.get("http://193.112.55.79:9090/api/getproductlist", {
            categoryid: getUrl("categoryid"), pageid: page
        }, function (result) {
            // console.log(result)
            // 渲染模板
            // 因为此时获取的result的结果是是对象，里面有个result属性的数组，所以直接传递对象过去，然后模板那边，使用result数组来遍历渲染数据，传result就相当于少了一次遍历的过程，模板那边可以直接使用所有的数据
            let html = template("productTP1", result);
            // 添加数据到页面上
            $(".main_productlist").html(html);
            // 获取页面大小和总条数
            let pagesize = result.pagesize;
            let totalCount = result.totalCount;
            // console.log(pagesize,totalCount)
            // 计算分页数
            pageNum = Math.ceil(totalCount / pagesize);
            // console.log(pageNum)
            let pageHtml = ``;
            // 循环渲染
            for (let i = 1; i <= pageNum; i++) {
                pageHtml += `
                <div data-pageNum="${i}" class="num_main_btn mui-collapse-content">
                第${i}页
            </div>
                `
            }
            // 追加到页面上
            // $(".mui-table-view-cell").append(pageHtml)
            $(".pro_main_push").html(pageHtml)
            
            // console.log(pageHtml)


        })
    };
    // //  定义一个获取数据的方法
    // function getProductData(func) {
    //     // 准备数据 发送请求
    //     $.get("http://193.112.55.79:9090/api/getproductlist", {
    //         categoryid: getUrl("categoryid"), pageid:1
    //     }, function (result) {
    //         // 传递数据
    //         func(result);

    //     })
    // }
    // 注册相关的点击事件
    function eventList() {
        // 给分页按钮绑定点击事件
        $(".mui-table-view-cell").on("tap", ".num_main_btn", function () {
            // console.log(112)
            // console.log(this)
            // 获取标签里面的data属性，调用方法，
            let pageid = this.getAttribute("data-pageNum");
            // 同时把值给page，不然的话，会有同步的错误
            page = pageid;
            // console.log(pageid)
            // 定义一个函数
            // let cb=function(){

            // }
            // // 调用方法
            getProductList(pageid);
            // 我们发现一个Bug那就是，移动度的点击穿透事件，因为移动端中click会有0.3秒的延迟，0.3秒之后才会判断你是否有双击，如果你点击了，就立刻收起图层，造成图层的变换，那么之前的点击位置效果就没有了，解决的方法是，延迟收回图层，不过这个用户体验不好，所以我们大多数时候做的是，做一个遮罩层，点击之后，在一定时间之内消失，这样点击事件就会落在想要点击的元素上
            // 把页面修改一下,同时移除 mui-active效果，是标签关闭
            // setTimeout(() => {
            //     $(".navigate-right_title").text(`第${pageid}页`).parents("li").removeClass("mui-active");
            // }, 350)
            // 除了上面的延后执行之外，还可以引入fastclick插件，fastclick实现的原理是，在触摸开始的时候，记录下了行为，然后进行默认，如果没有双击，就会阻止0.3s之后的点击延迟效果，执行之前模拟好的效果
            $(".navigate-right_title").text(`第${pageid}页`).parents("li").removeClass("mui-active");

            // return false;
        });
        // 绑定上一页的方法
        $(".footer_produ_pref_btn").on("tap", function () {
            // console.log(123)
            // 让当前页++
            // 判断，只有page>2的时候才可以减减
            if (page <= 1) {
                // 如果小于等于1的话，跳出循环
                return;
            }
            page--;
            console.log(page);
            // 调用方法
            getProductList(page);
            // 把页面修改一下,同时移除 mui-active效果，是标签关闭
            $(".navigate-right_title").text(`第${page}页`);
        });
        // 绑定点击下一页的事件
        $(".footer_produ_next_btn").on("tap", function () {
            // console.log(123)
            // 判断
            if (page >= pageNum) {
                return;
            }
            // 让当前页++
            page++;
            // 调用方法
            getProductList(page);
            // 把页面修改一下,同时移除 mui-active效果，是标签关闭
            $(".navigate-right_title").text(`第${page}页`);
        })
    }

    //  这是获取Url里面的参数的
    function getUrl(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return decodeURI(r[2]);
        return null;
    };
})